<template>
    <div class="tab-bar-item" @click="itemClick">
        <div v-if="!isActive" ><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <div :style="activeStyle"> <slot name="item-text"></slot></div>
       
        <!-- <img src="../../assets/img/tabbar/home.svg" alt="">
        <div>首页</div> -->
        <!-- 注意:这里有一个bug 连续点击item会报错 -->
    </div>
</template>

<script>
export default {
    name: 'TabbarTabbarItem',
    props: {
        path: String,
        activeColor: {
            type: String, 
            default: 'red'
        }
    },
    data() {
        return {
            //isActive: true
        };
    },
    computed: {
        isActive() {
            return this.$route.path.indexOf(this.path) !== -1
            //不等于-1说明找到了
            //$route拿到的是当前活跃的路由
        },
        activeStyle() {
            return this.isActive ? {color: this.activeColor} : {}
            //动态添加颜色 在App.vue中改变颜色
        }
    },

    methods: {
        itemClick() {
            this.$router.replace(this.path)
            //点击跳转页面
        }
    },
};
</script>

<style scoped>
    .tab-bar-item {
        flex: 1;
        text-align: center;
        height: 49px;
        font-size: 14px;
    }
    .tab-bar-item img {
        width: 24px;
        height: 24px;
        margin-top: 3px;
        vertical-align: middle;
        margin-bottom: 2px;
    }
   
</style>